<nz-card nzSize="small">
    <label style="float: right;line-height: 32px;margin-right: 10px;">当前工作流：{{workflowName}}</label>
    <nz-button-group>
        <button nz-button (click)="save()">保存</button>
    </nz-button-group>
</nz-card>
<div id="edit-area">
    <div id="tool-bar">
        <nz-card>
            <h2>节点</h2>
            <div nz-row [nzGutter]="8">
                <div nz-col [nzSpan]="8" *ngFor="let node of nodes">
                    <div class="tool-box" draggable="true" (dragover)="onDragOver($event)"
                        (dragstart)="onDragStart($event,node.key)">
                        <i nz-icon nzType="{{node.icon}}" nzTheme="outline" style="font-size: 48px;"></i>
                        {{node.name}}
                    </div>
                </div>
            </div>
        </nz-card>
    </div>
    <div id="flow-container" #flowContainer (drop)="dropZone($event)" (dragover)="onDragOver($event)">
    </div>
    <div #selectedBorder class="sborder">
        <div #lborder class="lborder"></div>
        <div #tborder class="tborder"></div>
        <div #rborder class="rborder"></div>
        <div #bborder class="bborder"></div>
    </div>
</div>

<ng-template #nodeEditTpl>
    <form nz-form [formGroup]="workflowNodeEditForm" (ngSubmit)="submitWorkflowNodeEdit()">
        <h2>基本信息</h2>
        <nz-form-item>
            <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" [nzFor]="'edit_workNodeName'">名称</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="workFlowNameErrorTpl">
                <input [attr.id]="'edit_workNodeName'" formControlName="name" nz-input placeholder="节点名称"
                    autocomplete=" off" />
            </nz-form-control>
            <ng-template #workFlowNameErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                    请输入内容！
                </ng-container>
                <ng-container *ngIf="control.hasError('maxlength')">
                    长度不能超过15！
                </ng-container>
            </ng-template>
        </nz-form-item>
        <h2>办理信息</h2>
        <nz-form-item>
            <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" [nzFor]="'edit_handleMode'">处理模式</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="handleModeErrorTpl">
                <nz-select formControlName="handleMode" [attr.id]="'edit_handleMode'">
                    <nz-option [nzValue]="1" nzLabel="指定人员处理当前节点"></nz-option>
                    <nz-option [nzValue]="2" nzLabel="指定职位处理当前节点"></nz-option>
                    <nz-option [nzValue]="3" nzLabel="指定部门负责人处理当前节点"></nz-option>
                    <nz-option [nzValue]="4" nzLabel="指定发起人部门负责人处理当前节点"></nz-option>
                    <!-- <nz-option nzValue="5" nzLabel="指定发起人上级部门负责人处理当前节点"></nz-option> -->
                </nz-select>
            </nz-form-control>
            <ng-template #handleModeErrorTpl let-control>
                <ng-container>
                    请选择内容！
                </ng-container>
            </ng-template>
        </nz-form-item>
        <nz-form-item *ngIf="workflowNodeEditForm.value['handleMode']==1">
            <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" [nzFor]="'edit_handlers'">办理人</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="handlersErrorTpl">
                <nz-select nzMode="multiple" nzPlaceHolder="指定人员" nzAllowClear nzShowSearch formControlName="handlers"
                    nzServerSearch (nzOnSearch)="onSearchUser($event)" [attr.id]="'edit_handlers'">
                    <ng-container *ngFor="let u of userList">
                        <nz-option *ngIf="!isLoading" [nzValue]="u.key" [nzLabel]="u.value"></nz-option>
                    </ng-container>
                    <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                        <i nz-icon nzType="loading" class="loading-icon"></i> 加载中...
                    </nz-option>
                </nz-select>
            </nz-form-control>
            <ng-template #handlersErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                    请选择人员！
                </ng-container>
            </ng-template>
        </nz-form-item>
        <nz-form-item *ngIf="workflowNodeEditForm.value['handleMode']==2">
            <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" [nzFor]="'edit_position'">职位</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="positionErrorTpl">
                <nz-select nzPlaceHolder="指定职位" nzAllowClear nzShowSearch formControlName="position" nzServerSearch
                    (nzOnSearch)="onSearchPosition($event)" [attr.id]="'edit_position'">
                    <ng-container *ngFor="let p of positionList">
                        <nz-option *ngIf="!isLoading" [nzValue]="p.key" [nzLabel]="p.value"></nz-option>
                    </ng-container>
                    <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                        <i nz-icon nzType="loading" class="loading-icon"></i> 加载中...
                    </nz-option>
                </nz-select>
            </nz-form-control>
            <ng-template #positionErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                    请选择内容！
                </ng-container>
            </ng-template>
        </nz-form-item>
        <nz-form-item *ngIf="workflowNodeEditForm.value['handleMode']==3">
            <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" [nzFor]="'edit_department'">部门负责人</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="departmentErrorTpl">
                <nz-select nzPlaceHolder="指定部门负责人" nzAllowClear nzShowSearch formControlName="department" nzServerSearch
                    (nzOnSearch)="onSearchDepartment($event)" [attr.id]="'edit_department'">
                    <ng-container *ngFor="let d of departmentList">
                        <nz-option *ngIf="!isLoading" [nzValue]="d.key" [nzLabel]="d.value"></nz-option>
                    </ng-container>
                    <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                        <i nz-icon nzType="loading" class="loading-icon"></i> 加载中...
                    </nz-option>
                </nz-select>
            </nz-form-control>
            <ng-template #departmentErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                    请选择内容！
                </ng-container>
            </ng-template>
        </nz-form-item>
        <h2>转出条件</h2>

        <ng-container *ngFor="let connection of connections">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="'edit_department'">
                    转入[{{getNodeName(connection.targetId)}}]
                </nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <nz-input-group nzCompact *ngFor="let item of connectionFormControls[connection.targetId]"
                        class="mt-5">
                        <nz-select nzPlaceHolder="表单项" nzAllowClear [formControlName]="item.formControlId"
                            style="width: 30%;">
                            <ng-container *ngFor="let d of formControlList">
                                <nz-option [nzValue]="d.key" [nzLabel]="d.value"></nz-option>
                            </ng-container>
                        </nz-select>
                        <nz-select nzPlaceHolder="比较方式" [formControlName]="item.compareMode" style="width: 30%;"
                            nzAllowClear>
                            <nz-option [nzValue]="1" nzLabel="等于"></nz-option>
                            <nz-option [nzValue]="2" nzLabel="大于"></nz-option>
                            <nz-option [nzValue]="3" nzLabel="小于"></nz-option>
                            <nz-option [nzValue]="4" nzLabel="大于等于"></nz-option>
                            <nz-option [nzValue]="5" nzLabel="小于等于"></nz-option>
                        </nz-select>
                        <input nz-input [formControlName]="item.compareValue" style="width:30%;">
                        <button style="width: 10%;" nz-button type="button"
                            (click)="removeFormControl(connection.targetId,item.formControlId)">
                            <i nz-icon nzType="minus-circle-o"></i>
                        </button>
                    </nz-input-group>

                    <div>
                        <button nz-button nzType="dashed" type="button" style="width:100%;margin-top: 5px;"
                            (click)="addFormControl(connection.targetId)">
                            <i nz-icon nzType="plus"></i>
                            添加条件
                        </button>
                    </div>
                </nz-form-control>

            </nz-form-item>
            <nz-form-item>
            </nz-form-item>
        </ng-container>

        <nz-form-item>
            <nz-form-control [nzSpan]="14" [nzOffset]="6">
                <button nz-button nzType="primary" class="mr-10">提交</button>
                <button nz-button type="reset" (click)="cancel()">取消</button>
            </nz-form-control>
        </nz-form-item>
    </form>
</ng-template>